<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../rest.css">

    <link rel="stylesheet" href="https://at.alicdn.com/t/font_2614180_xbla45bmcn.css">
    <style>
        .main {
            width: 1220px;
            margin: 50px auto;
            position: relative;
            overflow: hidden;
        }

        .main .banner {
            width: 500%;
            position: relative;
            left: 0;
            top: 0;

        }

        .main .banner img {
            width: 20%;
            float: left;
        }

        .main .banner_ul {
            display: flex;
            padding: 5px 10px;
            position: absolute;
            right: 20px;
            bottom: 20px;
        }

        .main .banner_ul .active {
            background: hsla(0, 0%, 100%, .4);
            border-color: rgba(0, 0, 0, .4);
        }

        .main .banner_ul li {
            width: 10px;
            height: 10px;
            margin: 0 5px;
            border-radius: 50%;
            border: 2px solid #fff;
            border-color: hsla(0, 0%, 100%, .3);
            background: rgba(0, 0, 0, .4);
        }

        .iconfont {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            font-size: 40px;
            color: #666;
            opacity: 0;
            transition: all 0.5s;
        }

        .iconfont.icon-zuo {
            left: 0;
        }

        .iconfont.icon-you {
            right: 0;
        }

        .main:hover .icon-zuo {
            opacity: 1;
            left: 10px;
        }

        .main:hover .icon-you {
            opacity: 1;
            right: 10px;
        }
    </style>

</head>

<body>
    <div class="main">
        <div class="banner clear">
            <img class="imgActive" src="./images/1.webp" alt="">
            <img class="imgActive" src="./images/2.jpg" alt="">
            <img class="imgActive" src="./images/3.webp" alt="">
            <img class="imgActive" src="./images/4.webp" alt="">
            <img class="imgActive" src="./images/1.webp" alt="">
        </div>
        <ul class="banner_ul">
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>

        <div class="iconfont icon-zuo"></div>
        <div class="iconfont icon-you"></div>
    </div>

</body>



<script>

    var main = document.getElementsByClassName('main')[0]
    var banner = document.getElementsByClassName('banner')[0]
    var imgList = document.getElementsByClassName('imgActive')
    var liList = document.querySelectorAll('.banner_ul li')
    var next = document.getElementsByClassName('icon-you')[0]
    var prev = document.getElementsByClassName('icon-zuo')[0]
    var imgWidth = main.clientWidth
    var index = 0//记录全局下标
    var timer = null


    for (let i = 0; i < liList.length; i++) {
        liList[i].onclick = function () {
            index = i
            for (let i = 0; i < liList.length - 1; i++) {
                liList[i].className = ''
            }
            this.className = 'active'
            animate(banner, "left", -imgWidth * i, "slow")
        }
    }

    startBanner()
    function startBanner() {
        clearInterval(timer)
        timer = setInterval(() => {
            index++
            autoCalc()
        }, 2000)
    }

    
    function autoCalc() {
        if (index >= imgList.length) {
            index = 0
            banner.style.left = 0
            index++
        }
        if (index < 0) {
            index = imgList.length - 1
            banner.style.left = -index * imgWidth + 'px'
            index--
        }
        for (let i = 0; i < liList.length; i++) {
            liList[i].className = ''
        }
        var activeIndex = (index >= imgList.length - 1) ? 0 : index
        liList[activeIndex].className = 'active'
        animate(banner, "left", -imgWidth * index, "slow", function () {
            if (index >= imgList.length - 1) {
                banner.style.left = 0
                index = 0
            }
        })
    }




    main.onmouseleave = function () {
        startBanner()
    }

    main.onmouseenter = function () {
        clearInterval(timer)
    }

    next.onclick = function () {
        index++
        autoCalc()
        console.log(index);
    }

    prev.onclick = function () {
        index--
        autoCalc()
    }





    function animate(ele, key, end, type = "slow", callback) {
        // var end = 1000;

        // cur = ele.offsetLeft;  // 当前位置 => 起始位置
        cur = getVal(ele, key);  // 当前位置 => 起始位置
        end = parseFloat(end); // 有单位 => 去单位 \    var speed = 0;

        // 将计时器的编号绑定到运动的元素上 => 对应元素的timer属性  清除计时器的编号
        clearInterval(ele.timer);
        ele.timer = setInterval(function () {
            if (type == "normal") {
                // 匀速  => 不受计时器影响
                if (end > cur) { //  0 -> 1000
                    speed = 10;
                } else if (end < cur) { // 1000 -> 0
                    speed = -10;
                } else {
                    speed = 0;
                }
            } else if (type == "fast") {
                // 加速运动 => 让速度随时间推移  => 增加
                if (end > cur) { //  0 -> 1000
                    speed += 2;
                } else if (end < cur) { // 1000 -> 0
                    speed -= 2;
                } else {
                    speed = 0;
                }
                // console.log(speed);
            } else if (type == "slow") {
                // 缓冲运动 => 每次走剩余的1/n  => n缓冲因子(一般8-12)
                // 问题: 虽然速度递减 => 根本到不了终点(0.0004999999999995453)   => 速度不满1  => 取1
                // 正向 0-1000 =>  0.00049999  => 向上取值 1
                // 反向 1000-0 =>  -0.00049999 => 向下取值 -1
                if (end > cur) { //  0 -> 1000
                    //    (终点值 - 当前位置)/ n缓冲因子  =>   每次走剩余的1/10
                    speed = (end - getVal(ele, key)) / 10;
                    speed = Math.ceil(speed);
                } else if (end < cur) { // 1000 -> 0
                    speed = (end - getVal(ele, key)) / 10;
                    speed = Math.floor(speed);
                } else {
                    speed = 0;
                }
            }
            // console.log(speed);
            if (Math.abs(getVal(ele, key) - end) <= Math.abs(speed)) { //到达终点   100 -> 1000
                clearInterval(ele.timer);
                ele.style[key] = end + "px";  // 如果超出强制到达终点
                if (callback && typeof callback === "function") {
                    callback();
                }
            } else { // 没有到达终点再跑一次
                // 每次ele 相较于当前位置 向前/向后 加上对应的speed
                ele.style[key] = (getVal(ele, key) + speed) + "px";
            }
        }, 10);
    }

    function getVal(ele, key) {
        return parseFloat(getStyle(ele, key));
    }

    function getStyle(ele, key) {
        if (window.getComputedStyle) {
            return window.getComputedStyle(ele)[key];
        } else {
            return ele.currentStyle[key];
        }
    }
</script>

</html>